<template>
	<div class="xiazhu_div1">
		<!-- 组件 -->
		<!-- 0-9生肖 -->
		<ul class="zhenghe_ul2">
			<li class="zhenghe_li_qiu" v-for="(item,index) in list" :key="index" :class="{active:matchClass(index)}" @click="changeMatch(index)">
				<b>{{item.shuzi}}</b>
				<p>9</p>
			</li>
			<!-- 查看选中 -->
			<li>
				<p>选中{{this.activeIndex}}</p>
				<p>选中{{this.activeIndex2}}</p>
			</li>
		</ul>
		<!-- 大小单双全清 -->
		<ul class="xuanze_xiazhu_ul zhenghe_danshuang">
			<li class="zhenghe_span" v-for="(item,index) in list0" :key="index" :class="{active:matchClass2(index)}" @click="changeMatch2(index)">
				<b>{{item.wan}}</b>
				<p>1.8</p>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		name: 'wanfa',
		data() {
			return {
				// 选大小单双清
				list0: [{
						id: "0",
						wan: "单"
					},
					{
						id: "0",
						wan: "双"
					},
					{
						id: "0",
						wan: "大"
					},
					{
						id: "0",
						wan: "小"
					},
				],
				//  动物图片
				list: [{
						id: "0",
						shuzi: "0"
					},
					{
						id: "1",
						shuzi: "1"
					},
					{
						id: "2",
						shuzi: "2"
					},
					{
						id: "3",
						shuzi: "3"
					},
					{
						id: "4",
						shuzi: "4"
					},
					{
						id: "5",
						shuzi: "5"
					},
					{
						id: "6",
						shuzi: "6"
					},
					{
						id: "7",
						shuzi: "7"
					},
					{
						id: "8",
						shuzi: "8"
					},
					{
						id: "9",
						shuzi: "9"
					}

				],
				activeIndex: [], //此时要改变颜色的动物 下标 所有选中的数据 都在里面
				isred: null,
				activeIndex2: [] //这是单双大小
			};
		},
		methods: {
			//   点击0-9图片匹配 includes选中的数据 有该项下标时 返回true 没有返回false
			matchClass(index) {
				return this.activeIndex.includes(index);
			},
			//  单独点击下面动物改变
			changeMatch(index) {
				// 声明一个这个数组中有没有这个下标
				let bol = this.activeIndex.includes(index);
				if(bol) {
					// 若是选中这个，则删除一个这个index
					this.activeIndex.splice(this.activeIndex.indexOf(index), 1);
				} else {
					// 若是没有，则添加这个下标
					this.activeIndex.push(index);
				}
				this.$emit('getActiveData', this.activeIndex)
			},
			//点击大小单双
			matchClass2(index) {
				return this.activeIndex2.includes(index);
			},
			changeMatch2(index) {
				// 声明一个这个数组中有没有这个下标
				let bol = this.activeIndex2.includes(index);
				if(bol) {
					// 若是选中这个，则删除一个这个index
					this.activeIndex2.splice(this.activeIndex2.indexOf(index), 1);
				} else {
					// 若是没有，则添加这个下标
					this.activeIndex2.push(index);
				}
				this.$emit('getActiveData', this.activeIndex2)
			},
		}
	}
</script>

<style scoped="scoped">
	.xuanze_xiazhu_ul .xuanze_xiazhu_li.red {
		background: #d21d17;
		color: #fff;
		border: none;
	}
	
	.xiazhu_chakan_ul .xiazhu_chakan_li.active {
		background: #d21d17 !important;
	}
	
	.zhenghe_ul2 .zhenghe_li_qiu.active {
		background: #d21d17;
	}
	
	.zhenghe_danshuang .zhenghe_span.active {
		background: #d21d17;
	}
</style>